<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
import echarts, { ECOption } from '@/components/Echart/config/index'

const chartRef = ref<HTMLElement | null>(null)
let myChart: echarts.ECharts

const props = defineProps({
	width: {
		type: String,
		default: '100%' // 默认值
	},
	height: {
		type: String,
		default: '100%'
	},
	data: {
		type: Object
	}
})
// console.log(props)

// 定义配置对象
const barOption = computed(
	(): ECOption => ({
		title: {
			text: props.data?.text,
			left: 'center', // 左右居中， left为与左边距离
			top: '0', // 与顶部距离
			textStyle: {
				color: 'skyblue', // 字体颜色
				fontSize: 30 // 字体大小
			}
		},
		// 展示被选中的数据
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			data: props.data?.series?.map((item: any) => item.name) || [],
			icon: 'circle',
			right: 'right'
		},
		grid: {
			left: '50',
			right: '70',
			bottom: '50',
			top: '80'
		},
		xAxis: {
			name: '年级',
			type: 'category',
			data: props.data?.grades
		},
		yAxis: {
			name: '平均分',
			type: 'value'
		},
		series:
			props.data?.series?.map((seriesItem: any) => ({
				name: seriesItem.name,
				data: seriesItem.data,
				type: 'line',
				smooth: true,
				label: {
					show: true,
					position: 'top',
					fontSize: '12',
					formatter: function (params: any) {
						// 只显示有效数值
						if (params.value === null || params.value === undefined) {
							return ''
						}
						// 根据数据值设置标签样式
						if (params.value < 60) {
							return `{bad|${params.value}}` // 使用富文本标签设置颜色
						} else {
							return params.value.toString() // 默认样式
						}
					},
					rich: {
						bad: {
							color: 'red', // 定义富文本标签的颜色
							fontSize: '12'
						}
					}
				},
				connectNulls: false // 不连接空值
			})) || []
	})
)

// console.log(barOption)
// 定义配置对象
const echartsStyle = {
	width: props.width,
	height: props.height,
	option: barOption
}
// console.log(echartsStyle)

function barFun() {
	// 基于准备好的dom，初始化echarts实例
	myChart = echarts.init(chartRef.value)
	// 使用刚指定的配置项options和数据显示图表myChart。
	// myChart.setOption(barOption)
	myChart.setOption(barOption.value)
}

onMounted(() => {
	barFun()

	// 与watch相似
	watchEffect(() => {
		// console.log(props.option)

		myChart.setOption(barOption.value, true) // setOption：option更新后，刷新。true：新的取代旧的
	})
})

// 渲染成功后，销毁
onUnmounted(() => {
	myChart.dispose()
})
</script>

<template>
	<div ref="chartRef" :style="echartsStyle"></div>
</template>

<style scoped>
/*div {*/
/*	box-sizing: border-box;*/
/*	border: 2px solid rgba(161, 154, 154, 0.486);*/
/*}*/
</style>
